<template>
  <div class="hello">
    <el-row>
      <el-col :span="3">
        <div class="grid-content bg-purple">
          <img src="京东.jpg" id="logo" @click="gohome" height="60px"/>
        </div>
      </el-col>
      <el-col :span="9">
        <div class="grid-content bg-purple linkdiv">
          <el-link type="info" :underline="false">网页首页</el-link>
          <el-link type="info" :underline="false">经典案例</el-link>
          <el-link type="info" :underline="false">生鲜农场</el-link>
          <el-link type="info" :underline="false">新鲜速递</el-link>
          <el-link type="info" :underline="false" href="/Contact">联系我们</el-link>
          <el-link type="info" :underline="false">关于我们</el-link>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-input placeholder="请输入内容" v-model="input" clearable suffix-icon="el-icon-search
">
          </el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="login1">
          登录/
          <el-link type="text" href="/register" :underline="false">注册</el-link>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Header",
  props: {
    msg: String
  },
  methods:{
    gohome(){
      this.$router.push('/')
    }
  }
};
</script>
<style>
  .el-button--mini, .el-button--mini.is-round {
    padding: 7px 15px;
    margin: 10px;
  }
  #logo{
    cursor: pointer;
  }

  .el-header, .el-footer {
    /*background-color: #B3C0D1;*/
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  /*.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }*/

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  /*.grid-content bg-purple{
    background-color: #42b983;
  }*/
  .linkdiv a {
    margin: auto 1%;
    color: #333333;
  }

  .linkdiv a:nth-of-type(1) {
    margin-left: -60px;
  }

  .content {
    background-color: #DFF0A4;
    position: relative;
    padding: 20px 100px;
  }

  .content1 .grid {
    height: 400px;
    background-color: #2B333B;
  }

  .content .el-row {
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 0 50px #D0D2D4;
  }

  .login1 {
    position: absolute;
    right: 30px;
  }

  .ul {
    list-style: none;
    margin-top: 0;
    padding-left: 10%;
    color: #F5FFE9;
  }

  .ul li {
    height: 55px;
    font-size: 18px;
    line-height: 60px;
  }

  .lidiv {
    float: left;
  }

  .show {
    position: absolute;
    left: 250px;
    top: 0;
    z-index: 9;
  }

  /*.content2{*/
  /*  padding-left: 0;*/
  /*}*/
  .content2 img {
    border-radius: 10px;
    margin-left: 30px;
  }

  .content2 img:hover {
    box-shadow: 0 0 10px #ddd;
    /*transform 图片变形  transition 变形时间*/
    transform: scale(1.1);
    transition: 1000ms;
  }
</style>
